//审核详情页
<template>
<div>
    <common-header
        :title="title"
        :type=3></common-header>
    <div class="mui-content">
        <div class="swipe-div">
            <mt-swipe :auto="0">
                <mt-swipe-item class="slide1" v-for="(img, index) in imgList" :key="index">
                    <a href="javascript: void(0)">
                        <img :src="img" preview="0"/>
                    </a>
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <!-- <div class="audit-tui" v-show="detail.vendername">
            <a class="iconfont icon-tuijian1"></a>
        </div> -->
        <div class="audit-details">
            <ul>
                <li>
                    <p class="audit-details-title">样衣编号:</p>
                    <p class="audit-details-conts">{{ data.sampleId }}</p>
                </li>
                <li>
                    <p class="audit-details-title">大类:</p>
                    <p class="audit-details-conts">{{ data.dlText }}</p>
                </li>
                <li>
                    <p class="audit-details-title">货号:</p>
                    <p class="audit-details-conts">{{ data.pcode }}</p>
                </li>
                <li>
                    <p class="audit-details-title">小类:</p>
                    <p class="audit-details-conts">{{ data.xlText }}</p>
                </li>
                <li>
                    <p class="audit-details-title">波段号:</p>
                    <p class="audit-details-conts">{{ data.bandname }}</p>
                </li>
                <li>
                    <p class="audit-details-title">合作方式:</p>
                    <p class="audit-details-conts">{{ data.jyfs }}</p>
                </li>
                <li>
                    <p class="audit-details-title">供货商编码:</p>
                    <p class="audit-details-conts">{{ data.supplierid }}</p>
                </li>
                <li>
                    <p class="audit-details-title">供货商:</p>
                    <p class="audit-details-conts">{{ data.vendername }}</p>
                </li>
                 <li>
                    <p class="audit-details-title">发货数量:</p>
                    <p class="audit-details-conts">{{ detail.sendqty }}</p>
                </li>
                <li>
                    <p class="audit-details-title">接收数量:</p>
                    <p class="audit-details-conts">{{ detail.recqty }}</p>
                </li>
                 <li>
                    <p class="audit-details-title">快递单号:</p>
                    <p class="audit-details-conts">{{ detail.expno }}</p>
                </li>
                <li>
                    <p class="audit-details-title">快递公司:</p>
                    <p class="audit-details-conts">{{ detail.expcompany }}</p>
                </li>
                <li class="row">
                    <p class="audit-details-title">颜色:</p>
                    <p class="audit-details-conts"><template v-for="color in deli.Color">{{ color.colourname}}&nbsp;&nbsp;</template></p>
                </li>
                 <li class="row"> 
                    <p class="audit-details-title">主荐颜色:</p>
                    <p class="audit-details-conts"><template v-for="color in deli.Color"><template v-if="color.isrecom == 1">{{ color.colourname }}</template></template></p>
                </li>
                <li class="row">
                    <p class="audit-details-title">尺码:</p>
                    <p class="audit-details-conts"><template v-for="size in deli.Size">{{ size.sizename}}&nbsp;&nbsp;</template></p>
                </li>
                 <li class="row">
                    <p class="audit-details-title">报价:</p>
                    <p class="audit-details-conts">{{ deli.cost }}</p>
                </li>
            </ul>
        </div>
        <div class="audit-regula" v-if="deli.Detial">
            <div class="audit-regula-title theGodds-titles">
                <h1>邮寄数量</h1>
                <div class="theGodds-title">
                    <ul>
                        <li>颜色</li>
                        <li>尺码</li>
                        <li>邮寄</li>
                        <li>实收</li>
                    </ul>
                </div>
            </div>
            <div class="audit-regula-cont oneScore-cont">
                <ul>
                    <li v-for="(de, index) in deli.Detial" :key="index">
                        <div class="mui-input-row mui-checkbox decision-details-box">
                            <label>{{ de.Color }}</label>
                            <label class="decision-details-label oneDecision-zong">{{ de.Size }}</label>
                            <label class="decision-details-label oneDecision-person">{{ de.sendqty }}</label>
                            <div class="onScore-count">
                                <input class="mui-numbox-input" max="7" min="0" step="5" v-model="de.recqty"  type="number"/>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="audit-button">
            <ul>
                <li class="audit-sure">
                    <button type="button" class="mui-btn mui-btn-blue" @click="submit">确认收货</button>
                </li>
            </ul>
        </div>
    </div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import commonHeader from '@/components/commonHeader.vue'
import { Swipe, SwipeItem } from 'mint-ui';
import API from '@/service/api'
export default {
    components: { commonHeader, Swipe, SwipeItem },
    data() {
        return {
            title: '确认收货',
            data: {},
            detail: {},
            imgList: [],
            deli: {},
            ids: [],
        }
    },
    computed: {
        ...mapState( [ 'sample_id', 'sample_no' ] ) 
    },
    methods: {
        ...mapMutations( [ 'UPDATE_SHOW_LOADING' ] ),
        async initialization() {
            // //获取基本信息
            let msg = await API.primary.getPrimaryExpress( {sampleId: this.sample_id })
            this.detail = msg
            //获取基本信息
            this.data = await API.currency.getSampleDetail({ ID: this.sample_no })
            //获取样衣图片列表
            let imgs = await API.currency.getSampleImgs({ sampleId: this.sample_id })
            for(let i = 1; i<6; i++) {
                const img = imgs[`limg${i}`]
                if(img) this.imgList.push(img)
            }
            let deli = await API.primary.getPrimaryDetail( {sampleId: this.sample_id })
            this.deli = deli
            deli.Detial.forEach(el=>{
                el.recqty = el.sendqty
            })
            //启动图片预览
            this.$previewRefresh()
            this.UPDATE_SHOW_LOADING(false)
        },
        check() {
            let flag = true
            if(this.deli.Detial.length>0) {
               this.deli.Detial.forEach(element => {
                   if(!element.recqty){
                       this.$error("请输入收货数量！")
                       flag = false
                       return
                   }
                   this.ids = [...this.ids,{ Id: element.Id, recqty: element.recqty }]
               })
           }
           return flag
        },
         //提交
        submit(status) {
            if(!this.check()) return
            this.UPDATE_SHOW_LOADING(true)
            API.takeDelivery.takeOneDelivery({ sampleId: this.sample_id, ids: this.ids }).then(res=> {
                this.handle(res)
            })
        },
        handle(res) {
            this.UPDATE_SHOW_LOADING(false)
            if(res.code == 1) {
                this.$success()
                setTimeout(()=>{
                    this.$router.push( { name: 'takeDelivery' } )
                },1000)
            }else this.$error(res.errMsg)
        }
    },
    created() {
       this.initialization()
    }
}
</script>
<style lang="less" scoped>
.audit-button{
    .audit-sure {
       width: 100%;
    }
}
.row {
    width: 100%;
}
.onScore-count {
    input {
        background-color: #efeff4
    }
}
</style>